<template>
  <div class="dashboard-charts">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card class="page-card">
          <div class="page-header"><h2>订单状态分布</h2></div>
          <div class="chart-container">
            <div ref="orderStatusRef" class="chart"></div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="page-card">
          <div class="page-header"><h2>商品销量排行榜</h2></div>
          <div class="chart-container">
            <div ref="topSellingRef" class="chart"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <el-card class="page-card">
          <div class="page-header"><h2>促销活动参与度对比</h2></div>
          <div class="chart-container">
            <div ref="promotionRef" class="chart"></div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="page-card">
          <div class="page-header"><h2>评价星级分布</h2></div>
          <div class="chart-container">
            <div ref="ratingRef" class="chart"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';
import {
  getOrderStatusDistribution,
  getTopSellingSkus,
  getPromotionParticipation,
  getEvaluationRatingDistribution
} from '@/api/dashboard';

const orderStatusRef = ref(null);
const topSellingRef = ref(null);
const promotionRef = ref(null);
const ratingRef = ref(null);

let orderStatusChart, topSellingChart, promotionChart, ratingChart;

const initCharts = () => {
  orderStatusChart = echarts.init(orderStatusRef.value);
  topSellingChart = echarts.init(topSellingRef.value);
  promotionChart = echarts.init(promotionRef.value);
  ratingChart = echarts.init(ratingRef.value);
  window.addEventListener('resize', () => {
    orderStatusChart.resize();
    topSellingChart.resize();
    promotionChart.resize();
    ratingChart.resize();
  });
};

const loadOrderStatus = async () => {
  const { data } = await getOrderStatusDistribution();
  const seriesData = data.data.map(item => ({
    name: ['待支付','已支付','已发货','已完成','已关闭'][item.status] || '未知',
    value: item.count
  }));
  orderStatusChart.setOption({
    color: ['#409EFF', '#69B1FF', '#A3C9FF', '#D2E4FF', '#EFF6FF'],
    tooltip: { trigger: 'item' },
    legend: { bottom: 0, textStyle: { color: '#333' } },
    series: [{
      type: 'pie', radius: ['40%', '65%'], avoidLabelOverlap: false,
      itemStyle: { borderRadius: 4, borderColor: '#fff', borderWidth: 2 },
      label: { show: false },
      emphasis: { label: { show: true, fontSize: 16, fontWeight: 'bold' } },
      data: seriesData
    }]
  });
};

const loadTopSelling = async () => {
  const { data } = await getTopSellingSkus(10);
  const names = data.data.map(item => item.skuName);
  const values = data.data.map(item => item.sales);
  topSellingChart.setOption({
    color: ['#409EFF'],
    xAxis: { type: 'category', data: names, axisLabel: { rotate: 40, color: '#333' }, axisLine: { lineStyle: { color: '#ccc' } } },
    yAxis: { type: 'value', axisLine: { lineStyle: { color: '#ccc' } }, splitLine: { lineStyle: { type: 'dashed' } } },
    tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
    series: [{ data: values, type: 'bar', barWidth: '50%', itemStyle: { borderRadius: [4, 4, 0, 0] } }]
  });
};

const loadPromotion = async () => {
  const { data } = await getPromotionParticipation();
  const names = data.data.map(item => item.activityName);
  const values = data.data.map(item => item.quantity);
  promotionChart.setOption({
    color: ['#409EFF'],
    xAxis: { type: 'category', data: names, axisLabel: { interval: 0, rotate: 30, color: '#333' }, axisLine: { lineStyle: { color: '#ccc' } } },
    yAxis: { type: 'value', axisLine: { lineStyle: { color: '#ccc' } }, splitLine: { lineStyle: { type: 'dashed' } } },
    tooltip: { trigger: 'axis' },
    series: [{ data: values, type: 'line', smooth: true, symbol: 'circle', symbolSize: 6, lineStyle: { width: 2 } }]
  });
};

const loadRating = async () => {
  const { data } = await getEvaluationRatingDistribution();
  const scores = data.data.map(item => `${item.score}星`);
  const counts = data.data.map(item => item.count);
  ratingChart.setOption({
    color: ['#409EFF'],
    xAxis: { type: 'category', data: scores, axisLine: { lineStyle: { color: '#ccc' } }, axisLabel: { color: '#333' } },
    yAxis: { type: 'value', axisLine: { lineStyle: { color: '#ccc' } }, splitLine: { lineStyle: { type: 'dashed' } } },
    tooltip: { trigger: 'axis' },
    series: [{ data: counts, type: 'bar', barWidth: '50%', itemStyle: { borderRadius: [4, 4, 0, 0] } }]
  });
};

onMounted(() => {
  initCharts();
  loadOrderStatus();
  loadTopSelling();
  loadPromotion();
  loadRating();
});

onBeforeUnmount(() => {
  /* 事件监听已在 initCharts 中以匿名方式注册 */
});
</script>

<style scoped>
.page-card {
  padding: 20px;
  display: flex;
  flex-direction: column;
}
.page-header {
  margin-bottom: 10px;
}
.page-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  color: #409EFF;
}
.chart-container {
  flex: 1;
}
.chart {
  width: 100%;
  height: 350px;
}
</style>
